<template>
  <div class="ingredients" ref="ingredientsContainer">
    <h2>Ingredients</h2>
    <table>
      <tbody>
      <tr v-for="(ingredient, index) in props.ingredients" :key="ingredient.name">
        <td class="quantity" :class="{ 'first-td': index === 0, 'last-td': index === props.ingredients.length - 1 }">
          {{ ingredient.quantity }}
        </td>
        <td class="name" :class="{ 'first-td': index === 0, 'last-td': index === props.ingredients.length - 1 }">
          <span :class="{ bold: ingredient.isBold }">
            {{ ingredient.name }}
          </span>
        </td>
      </tr>
      </tbody>
    </table>

    <!--  弹出框  -->
    <div v-if="copied" class="popup" :style="{ top: popupTop + 'px' }">
      <div class="arrow"></div>
      <span>Copied!</span>
    </div>
    <!--  复制按钮  -->
    <button class="copy-button" @click="copyIngredients" ref="copyButton">
      <img src="../../src/assets/image/clipboard.svg" alt="">
      Click list to clipboard
    </button>
    <!--  分享文本  -->
    <div class="share-text">
      <p>
        Follow <a href="https://www.instagram.com/UrbanPlateCo" target="_blank" rel="noopener noreferrer">@UrbanPlateCo</a> on Instagram to keep up to date and stalk more recipes like this one.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, watch } from 'vue'
import { Ingredient } from '@/data/foodData'

const props = defineProps<{
  ingredients: Ingredient[];
}>()

const copied = ref(false)
const popupTop = ref(0)
const copyButton = ref<HTMLElement | null>(null)
const ingredientsContainer = ref<HTMLElement | null>(null)

const copyIngredients = () => {
  const ingredientsText = props.ingredients
    .map(ingredient => `${ingredient.quantity} ${ingredient.name}`)
    .join('\n')

  navigator.clipboard.writeText(ingredientsText)
    .then(() => {
      copied.value = true
      setPopupPosition() // 复制后设置弹出框位置
      setTimeout(() => {
        copied.value = false
      }, 2000) // 2秒后隐藏弹出框
    })
    .catch(err => {
      console.error('Failed to copy: ', err)
    })
}

// 设置弹出框位置
const setPopupPosition = () => {
  if (copyButton.value && ingredientsContainer.value) {
    const buttonRect = copyButton.value.getBoundingClientRect()
    const containerRect = ingredientsContainer.value.getBoundingClientRect()
    popupTop.value = buttonRect.top - containerRect.top - 40 // 40px 可根据需要调整
  }
}

// 监听高度变化
onMounted(() => {
  if (ingredientsContainer.value) {
    const observer = new MutationObserver(setPopupPosition)
    observer.observe(ingredientsContainer.value, { childList: true, subtree: true })
  }
})

// 组件内容变化时重新计算位置
watch(() => props.ingredients, setPopupPosition)

</script>

<style scoped lang="scss">
$popup-bg: black;
$popup-text-color: white;
$button-bg: #EBEBEB;
$button-hover-bg: #e0e0e0;
$table-bg: #F1F1F1;

.ingredients {
  text-align: left;
  position: relative;
  padding: 10px;

  table {
    width: 100%;
    border-collapse: collapse;

    .first-td {
      padding-top: 16px;
    }

    .last-td {
      padding-bottom: 16px;
    }

    td {
      padding: 8px;
      font-size: 13px;
      background-color: $table-bg;

      &.quantity {
        width: 30%;
        text-align: right;
        padding-right: 10px;
        font-weight: 600;
      }

      &.name {
        width: 60%;
        text-align: left;
        padding-left: 10px;

        .bold {
          font-weight: bold;
        }
      }
    }
  }

  .copy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background-color: $button-bg;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;

    img {
      margin-right: 8px;
    }

    &:hover {
      background-color: $button-hover-bg;
    }
  }

  .popup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background-color: $popup-bg;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: $popup-text-color;
    display: inline-block;

    .arrow {
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid $popup-bg;
    }

    span{
      font-size: 12px;
    }
  }

  .share-text {
    margin-top: 20px;

    p {
      color: #565656;
      font-weight: normal;
    }

    a {
      font-weight: 600;
      color: black;
      text-decoration: none;
    }

    @media (max-width: 600px){
      display: none;
    }
  }
}
</style>
